<template>
  <div>
    <el-button type="primary">添加管理员</el-button>
    <el-card class="box-card"
             style="width: 400px">
      <div slot="header"
           class="clearfix">
        <span v-if="admin!= null">{{admin.adminUsername}}</span>
      </div>
      <div>
        <div style="display: flex;justify-content: center">
          <el-upload action="/admin/api/updateAdminAvatar"
                     :data="fileDate"
                     :show-file-list="false"
                     :on-success="onSuccess">
            <img title="点击修改用户头像"
                 v-if="admin !=null"
                 :src="admin.adminFace"
                 style="height: 100px;width: 100px;border-radius: 50px"
                 alt="">
          </el-upload>
        </div>
        <div>手机号码：
          <el-tag v-if="admin !=null">{{admin.adminPhone}}</el-tag>
        </div>
        <div>账号:
          <el-tag v-if="admin !=null">{{admin.adminAccount}}</el-tag>
        </div>
        <div>标签
          <el-tag>系统管理员</el-tag>
        </div>
        <div style="display: flex;justify-content: space-around;margin-top: 10px">
          <el-button type="primary"
                     @click="showUpdateAdminInfoDialog">修改信息</el-button>
          <el-button type="danger"
                     @click="showUpdatePasswordView">修改密码</el-button>
                     
        </div>
      </div>
    </el-card>

    <el-dialog title="修改用户信息"
               width="30%"
               :visible.sync="showUpadteAdminInfoDialogVisible">
      <div>
        <table>
          <tr>
            <td>管理员</td>
            <td><el-input v-if="updateAdmin != null"
                        v-model="updateAdmin.adminUsername"></el-input></td>
          </tr>
          <tr>
            <td>手机号码</td>
            <td><el-input v-if="updateAdmin != null"
                        v-model="updateAdmin.adminPhone"></el-input></td>
          </tr>
          <tr>
            <td>登录账号</td>
            <td><el-input v-if="updateAdmin != null"
                        v-model="updateAdmin.adminAccount"></el-input></td>
          </tr>

        </table>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="showUpadteAdminInfoDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="updateAdminInfo">确 定</el-button>
      </span>

    </el-dialog>
    <!-- 修改密码 -->
    <el-dialog title="更新密码"
               :visible.sync="passwordDialogVisible"
               width="30%">
      <div>
        <el-form :model="ruleForm"
                 status-icon
                 :rules="rules"
                 ref="ruleForm"
                 label-width="100px"
                 class="demo-ruleForm">
          <el-form-item label="请输入旧密码"
                        prop="oldPassword">
            <el-input type="password"
                      v-model="ruleForm.oldPassword"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请输入新密码"
                        prop="newPassword">
            <el-input type="password"
                      v-model="ruleForm.newPassword"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码"
                        prop="checkPassword">
            <el-input type="password"
                      v-model="ruleForm.checkPassword"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "AdminInfo",
  data() {
    return {
      admin: null,
      updateAdmin: null,
      fileDate: {
        id: 0
      },
      showUpadteAdminInfoDialogVisible: false,
      ruleForm: {
        id : 0,
        newPassword: '',
        checkPassword: '',
        oldPassword: ''
      },
      rules: {
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '在次输入密码不能为空', trigger: 'blur' }
        ],
        oldPassword: [
          { required: true, message: '原密码不能为空', trigger: 'blur' }
        ]
      },
      passwordDialogVisible: false
    }
  },
  mounted() {
    this.initAdmin();
  },
  methods: {

    initAdmin() {
      var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
      this.getRequest('/admin/api/getAminInfo/' + userInfo.id).then(res => {
        console.log(res)
        if (res.code == 200 && res.msg == "success") {
          this.admin = res.data;
          console.log(this.admin)
          this.updateAdmin = res.data
          this.fileDate.id = res.data.id;
        } else {
          this.$message.error("获取用户信息失败");
        }
      })
    },
    onSuccess() {
      this.initAdmin();
    },

    showUpdateAdminInfoDialog() {
      this.showUpadteAdminInfoDialogVisible = true;
    },
    // 更新用户信息
    updateAdminInfo() {
      this.putRequest('/admin/api/updateAdminInfo', this.updateAdmin).then(res => {
        if (res.code == 200 && res.msg == "success") {
          this.$message.success("修改成功");
          this.showUpadteAdminInfoDialogVisible = false;
          // 重新获取用户信息
          this.initAdmin();
        } else {
          this.$message.error("修改失败");
        }
      })
    },
    // 修改密码 
    showUpdatePasswordView() {
      this.passwordDialogVisible = true;
    },
    submitForm(formName) {
      // 判断两次密码是否一样
      if (this.ruleForm.checkPass != this.ruleForm.pass) {
        this.$alert('两次密码不一致')
      }


      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.id = this.admin.id;
          this.putRequest('/admin/api/updatePassword', this.ruleForm).then(res => {
            if (res.code == 200 && res.msg == "success" ) {
              //更新密码成功后退出登录
              this.postRequest('/logout');
              window.sessionStorage.removeItem('user');
              window.sessionStorage.removeItem('tokenStr');
              this.$store.commit('initRoutes', []);
              this.$router.replace('/');
            } else {
              this.$alert(res.msg)
            }
          })
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },


  }
}
</script>

<style scoped>
</style>